<!-- 媒体设置 -->
<template>
    <div class="bg-white goods_create" style="margin: -20px; margin-top:-1rem; margin-bottom: 0!important;">
        <router-link :to="{ path: './list' }" style="position: absolute;top: 12px;left: 200px;">
            <el-button size="mini">回到商品列表</el-button>
        </router-link>
        <div class="d-flex flex-wrap">
            <!-- 替换的话，传递索引过去chooseImage(index) -->
            <div style="width: 150px; height:150px;cursor:pointer;position:relative"
                class="border rounded d-flex align-items-center justify-content-center mr-3 mb-3"
                v-for="(item, index) in banners" :key="index" @click="chooseImage(index)">
                <img v-if="item.url" :src="item.url" alt="" style="width: 100%;height: 100%;">

                <i v-else class="el-icon-plus text-muted" style="font-size: 30px;"></i>

                <i class="el-icon-delete p-2 text-white"
                    style="position: absolute; top:0;right: 0; background-color: rgba(0,0,0,0.4);"
                    @click.stop="deleteImage(index)"></i>
            </div>

            <!-- chooseImage(-1) -->
            <div v-if="banners.length < 9" style="width: 150px; height:150px;cursor:pointer"
                class="border rounded d-flex align-items-center justify-content-center mr-3 mb-3"
                @click="chooseImage(-1)">
                <i class="el-icon-plus text-muted" style="font-size: 30px;"></i>
            </div>
        </div>
        <el-button text="primary" style="position: fixed; bottom: 50px; right: 50px;" @click="submit">
            提交
        </el-button>
    </div>
</template>
<script>

export default {
    name: "goodsBanners",
    inject: ['layout','app'],

    data() {
        return {
            banners: [],
            id: 0

        }
    },
    created() {
        this.id = this.$route.params.id
        if (!this.id) {
            this.$message.error('非法参数')
            return this.$router.push({
                name: 'shop-goods-banner'
            })
        }
        this.layout.showLoading()
        // 初始化操作
        this.$axios.get('/admin/goods/read/' + this.id, { token: true }).then((res) => {
            let data = res.data.data
            // this.banners = data.goodsBanners
            this.banners = Array.isArray(data.goodsBanners) ? data.goodsBanners : [];
            this.layout.hideLoading()
        }).catch(() => {
            this.layout.hideLoading()
        })
    },
    // 测试是否vuex能够访问skus_type
    mounted() {

    },
    methods: {
        // 选择图片
        chooseImage(index) {
            const Max = 9;
            let count = Max - this.banners.length;
            // 下面的chooseImage是来自于app.vue中的函数
            // 传递max参数为3，即最大选中chooseImage=3
            this.app.chooseImage((res) => {
                let list = [];
                // 选择走的流程
                if (index === -1) {
                    // 让原有的banners数组中的元素就等于当前的展示的内容
                    list = [...this.banners, ...res];
                }
                // 替换操作走的流程
                else {
                    list = [...this.banners]
                    list[index] = res[0]
                }

                // 不能用这个，因为res为一个数组
                // list.push(res);
                this.banners = list
            }, index === -1 ? count : 1);
            // index为-1代表选择，选择的话选择9-n的剩余张数，替换的话只能为一张
        },
        // 删除大图的方法
        deleteImage(index) {
            this.$confirm('是否要删除该图片, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                // let list = [...this.banners];
                this.banners.splice(index, 1);
                // this.vModel('banners', list)
            })
        },
        submit() {
            this.layout.showLoading()
            this.$axios.post('/admin/shop/banners/' + this.id, {
                banners: this.banners.map(item => item.url)
            }).then(() => {
                this.$message.success('修改成功')
                return this.$router.push({
                    name: 'shop-goods-banner'
                })
            }).then(() => {

            })
        }
    }
}

</script>
<style>
.goods_create .el-form-item {
    margin-bottom: 10px;
}
</style>